<!DOCTYPE html>
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->

		<title> Tracker Club </title>
		<meta name="description" content="">
		<meta name="author" content="">
			
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<!-- Basic Styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="css/font-awesome.min.css">

		<!-- SmartAdmin Styles : Please note (smartadmin-production.css) was created using LESS variables -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-production.css">
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-skins.css">

		<!-- SmartAdmin RTL Support is under construction
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-rtl.css"> -->

		<!-- We recommend you use "your_style.css" to override SmartAdmin
		     specific styles this will also ensure you retrain your customization with each SmartAdmin update.
		<link rel="stylesheet" type="text/css" media="screen" href="css/your_style.css"> -->

		<!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp
		<link rel="stylesheet" type="text/css" media="screen" href="css/demo.css">
		 -->
		<!-- GOOGLE FONT --> 
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700">
		

		
	</head>

<style>
body {
  margin: 0;
  background-image: url("img/background.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.content {
	height: 100%; 
}

.boxlogin {
  position: absolute;
  top: 20px; left: 5px; bottom: 0; right: 5px;
} 
</style>	

	<body class="">

			<!-- MAIN CONTENT -->
			<div id="content">

				<div id="dvBoxlogin" class="boxlogin" align="center">
				</br>
				<form action="" id="checkout-form" class="smart-form"
					novalidate="novalidate">
					<input type="hidden" name="model" id="model">
	
					<fieldset>
						<div class="row">
							<section class="col col-6">
								<label class="input"> <i class="icon-prepend fa fa-user"></i>
									<input type="text" name="name" id="name" placeholder="Nome">
								</label>
							</section>
	
						</div>
						
						<div class="row">
							<section class="col col-6">
								<label class="select"></i>
								
									<select class="input-sm" name="brand" id="brand" onchange="comboModel();">
											<option value="Volkswagen">Volkswagen</option>
											<option value="Outros">Outros</option>
									</select> 
									
								</label>
							</section>
	
						</div>
						
						<div class="row" id="combo-model">
							<section class="col col-6">
								<label class="select"></i>
								
									<select class="input-sm" name="cmbmodel" id="cmbmodel" >
										    <option value="">Selecione...</option>
											<option value="Comfortline 1.4 TSI">Comfortline 1.4 TSI</option>
											<option value="Comfortline 1.4 TSI DSG">Comfortline 1.4 TSI DSG</option>
											<option value="Highline 1.4 TSI">Highline 1.4 TSI</option>
											<option value="Highline 1.4 TSI DSG">Highline 1.4 TSI DSG</option>
											<option value="GTI 2.0 DSG">GTI 2.0 DSG</option>
									</select> 
									
								</label>
							</section>
	
						</div>						
						
						<div class="row" id="other-model" style="display: none;">
							<section class="col col-6">
								<label class="input"> <i class="icon-prepend fa fa-tag"></i>
									<input type="text" name="txtmodel" id="txtmodel" placeholder="Modelo">
								</label>
							</section>
	
						</div>						
					</fieldset>
				</form>
	
				</br> 
				<div id="dvLogin" style="display: block;">
				
				<button type="button" class="btn btn-labeled btn-default" onclick="login()">
				 <span class="btn-label">
				  <i class="glyphicon glyphicon-ok"></i>
				 </span>Entrar
				</button>				
				
				
				</div>
				<!-- 
					<br /> 
					<button type="button" class="btn btn-labeled btn-primary"
						onclick="AndroidNativeCode.test1();">
						<span class="btn-label"> </>Teste 1
					</button>
							
					<br />
					
					<button type="button" class="btn btn-labeled btn-primary"
						onclick="AndroidNativeCode.test2()">
						<span class="btn-label"> </>Teste 2
					</button>	
					
					<button type="button" class="btn btn-labeled btn-primary"
						onclick="AndroidNativeCode.test3()">
						<span class="btn-label"> </>Teste 3
					</button>
				-->
	
			</div>	
		</div>
		<!-- END MAIN CONTENT -->


		<!--================================================== -->

		<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)
		<script data-pace-options='{ "restartOnRequestAfter": true }' src="js/plugin/pace/pace.min.js"></script>-->

		<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
		<script>
			if (!window.jQuery) {
				document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>');
			}
		</script>

		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
		<script>
			if (!window.jQuery.ui) {
				document.write('<script src="js/libs/jquery-ui-1.10.3.min.js"><\/script>');
			}
		</script>

		<!-- JS TOUCH : include this plugin for mobile drag / drop touch events
		<script src="js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script> -->

		<!-- BOOTSTRAP JS -->
		<script src="js/bootstrap/bootstrap.min.js"></script>

		<!-- CUSTOM NOTIFICATION -->
		<script src="js/notification/SmartNotification.min.js"></script>

		<!-- JARVIS WIDGETS -->
		<script src="js/smartwidgets/jarvis.widget.min.js"></script>

		<!-- EASY PIE CHARTS -->
		<script src="js/plugin/easy-pie-chart/jquery.easy-pie-chart.min.js"></script>

		<!-- SPARKLINES -->
		<script src="js/plugin/sparkline/jquery.sparkline.min.js"></script>

		<!-- JQUERY VALIDATE -->
		<script src="js/plugin/jquery-validate/jquery.validate.min.js"></script>

		<!-- JQUERY MASKED INPUT -->
		<script src="js/plugin/masked-input/jquery.maskedinput.min.js"></script>

		<!-- JQUERY SELECT2 INPUT -->
		<script src="js/plugin/select2/select2.min.js"></script>

		<!-- JQUERY UI + Bootstrap Slider -->
		<script src="js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>

		<!-- browser msie issue fix -->
		<script src="js/plugin/msie-fix/jquery.mb.browser.min.js"></script>

		<!-- FastClick: For mobile devices: you can disable this in app.js -->
		<script src="js/plugin/fastclick/fastclick.js"></script>

		<!--[if IE 7]>

		<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>

		<![endif]-->

		<!-- Demo purpose only -->
		<script src="js/demo.js"></script>

		<!-- MAIN APP JS FILE -->
		<script src="js/app.js"></script>
		<script src="js/json2.js"></script>
		<script src="js/jquery.cookie.js"></script>

	</body>

<script type="text/javascript">
	
	// DO NOT REMOVE : GLOBAL FUNCTIONS!
	pageSetUp();
	VOLKSWAGEN = "Volkswagen";
	OUTROS = "Outros";
	function login() {

	var jsonArg = new Object();
	    jsonArg.name = document.getElementById('name').value;
	    jsonArg.brand = document.getElementById('brand').value;
	    jsonArg.model = getModelName();

	    stringJson = JSON.stringify(jsonArg);
		AndroidNativeCode.login(stringJson);
	
	}

	function getModelName() {
		try {
			
			model = "";
			
			brand = document.getElementById('brand').value;
	
			 if (brand == VOLKSWAGEN) {
				 model = document.getElementById('cmbmodel')[document.getElementById('cmbmodel').selectedIndex].value;
				 
			 } else if (brand == OUTROS) {
				 model = document.getElementById('txtmodel').value;
			 }		
	
			 return model;

		} catch (e) {

			return;
			
		}				 
		
	}
	
	function comboModel() {
		try {
			brand = document.getElementById('brand').value;
	
			document.getElementById('cmbmodel').selectedIndex = 0;
			document.getElementById('txtmodel').value = "";
			
			 if (brand == VOLKSWAGEN) {
					document.getElementById('combo-model').style.display 	= "block";
					document.getElementById('other-model').style.display 	= "none";
				 
			 } else if (brand == OUTROS) {
					document.getElementById('combo-model').style.display 	= "none";
					document.getElementById('other-model').style.display 	= "block";
			 }

		} catch (e) {

			return;
			
		}				 
	}	

	function setUserData(jsonObject) {
		try {
			name 	= jsonObject.Name;
			brand 	= jsonObject.Brand;
			model	= jsonObject.Model;

			document.getElementById('name').value = name;
			setComboPosition(document.getElementById('brand'), brand);
			comboModel();
	
			 if (brand == VOLKSWAGEN) {
				 setComboPosition(document.getElementById('cmbmodel'), model);
				 
			 } else if (brand == OUTROS) {
				 document.getElementById('txtmodel').value = model;
			 }			

		} catch (e) {
			AndroidNativeCode.showMessage(e.message);
			return;
			
		}		
		
	}

	function setComboPosition(combo, value) {
		try {
			for(var i = 0, j = combo.options.length; i < j; ++i) {
		        if(combo.options[i].value === value) {
		        	combo.selectedIndex = i;
		           break;
		        }
		    }
		} catch (e) {
			AndroidNativeCode.showMessage(e.message);
			return;
			
		}		

	}

	AndroidNativeCode.lastLoginInfo();

</script>
	
</html>